<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，A simple and flexible front-end framework。">
<meta name="author" content="Zentao">
<title>ZUI - Data table example</title>
<link href="../../dist/css/zui.css" rel="stylesheet">
<link href="../../dist/lib/datagrid/zui.datagrid.css" rel="stylesheet">
</head>

<body style="padding: 20px">
  <div id="dataGrid2" class="datagrid hidden">
    <header>
      <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample">
        <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="search for">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
      <h1>Comprehensive presentation of data table functions</h1>
    </header>
    <div class="datagrid-container"></div>
    <div class="pager"></div>
  </div>
  <div id="dataGrid" class="datagrid">
    <header>
      <h1>Remote request data example</h1>
      <p class="small">New data table view component for smooth display of hundreds of millions of dynamic data，Full features include automatic paging、search for、Remote data loading、Row selection、Cross-row、Fixed row and row、Sorting, etc.。This component will beZUI 1.8Released。</p>
    </header>
  </div>
  <div id="remoteDataGridExample" class="datagrid"></div>

<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../../dist/lib/selectable/zui.selectable.js"></script>
<script src="../../dist/lib/datagrid/zui.datagrid.js"></script>
<script>
$(function() {
    // Returns a random integer between min (included) and max (included)
    var getRandomInt = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    var getRandomData = function(arr, start, end) {
        if (start === undefined) {
            start = 0;
        }
        if (end === undefined) {
            end = arr.length;
        }
        return arr[getRandomInt(start, end - 1)];
    };
    var getLuckInt = window.getLuckInt = function(min, max, luck) {
        return (luck % (max - min) + min);
    };
    var getLuckData = window.getLuckData = function(arr, start, end, luck) {
        if (start === undefined || start === null) {
            start = 0;
        }
        if (end === undefined || end === null) {
            end = arr.length;
        }
        return arr[getLuckInt(start, end - 1, luck)];
    };
    var nowTime = new Date().getTime();
    var createDataSample = function(size) {
        size = size || 100;
        var heros = ['Limaru', 'Phantom Assassin', 'prayer', 'Axe king', 'Witch doctor', 'Radiant Defense Tower', 'Roshan', 'Bloodthirsty', 'Zeus', 'Shadow magic', 'Mibo', 'Tree guard'];
        var actions = ['Kill', 'Pick up', 'buy', 'treatment'];
        var items = ['Holy sword', 'Blade of the Ethereal', 'True gems', 'Heart of fear', 'Travel shoes', 'Treatment ring', 'Black king', 'Refresh the ball', 'Gold hoop', 'butterfly', 'Fog of mist', 'Dust of development', 'Detective guard', 'Sentry guard', 'swirl', 'The top of heaven', 'Blade armor', 'Guardian of Shiva', 'Assault Breastplate', 'Stick of Athos', 'Silver Moon Crystal', 'Eye of Scarlett', 'Exquisite heart', 'Satan&#39;s evil power', 'Veto ornaments', 'Hidden knife', 'Blood spine', 'Evil sickle', 'Silver front', 'Hui Yao', 'Daedalus', 'Phantom axe', 'Lincoln Ball', 'Akhalim Scepter', 'Necronomic book'];
        var runes = ['Bounty charm', 'Double rune', 'Magical rune', 'Extreme speed', 'Immortal guardian', 'cheese'];
        var cols = [
            {label: 'time', name: 'time', width: 130, valueType: 'gametime', sort: true},
            {label: 'hero', name: 'hero', width: 80},
            {label: 'action', name: 'action', width: 60},
            {label: 'teammate', name: 'teammate', width: 80},
            {label: 'enemy', name: 'enemy', width: 80},
            {label: 'date', name: 'date', width: 100, valueType: 'date'},
            {label: 'article/Rune', name: 'item', width: 80},
            {label: 'get experience', name: 'gotexps', width: 80, valueType: 'number'},
            {label: 'Get money', name: 'gotgolds', width: 80, valueType: 'number'},
            {label: 'Cumulative experience', name: 'exps', width: 80, valueType: 'number'},
            {label: 'Remaining money', name: 'golds', width: 80, valueType: 'number'},
            {label: 'description', name: 'desc', width: 'auto', minWidth: 200},
            {label: 'Cumulative head', name: 'kills', width: 110, valueType: 'number', valueOperator: {getter: function(value, cell, dg) {
                return '[' + value + ']';
            }}},
        ];

        var createDataItem = function(index) {
            var luckNumber = parseInt((Math.sin(index + 1) + '').substr(3));
            var time = 600 + 5*index + getLuckInt(0, 5, luckNumber);
            var action = getLuckData(actions, null, null, luckNumber);
            var heroIndex = getLuckInt(0, action === 'Kill' ? 6 : 4, luckNumber);
            var hero = heros[heroIndex];
            var teammate, enemy, item;
            var heroData = {
                golds: heroIndex*500*heroIndex + 71*index + getLuckInt(0, 71, luckNumber),
                exps: heroIndex*300*heroIndex + 43*index + getLuckInt(0, 43, luckNumber),
                kills: heroIndex + Math.floor(index/10)
            };
            var gotExps = 0;
            var gotGolds = 0;
            switch (action) {
                case 'Kill':
                    enemy = getLuckData(heros, 6, 9, luckNumber);
                    gotExps += getLuckInt(0, 1000 + index * 10, luckNumber);
                    gotGolds += getLuckInt(0, 200 + index * 8, luckNumber);
                    if (hero === 'Limaru') {
                        action = 'Stealing';
                    } else if (hero === 'Axe king') {
                        action = 'Kill';
                    }
                    break;
                case 'buy':
                    item = getLuckData(items, null, null, luckNumber);
                    break;
                case 'Pick up':
                    item = getLuckData(runes, null, null, luckNumber);
                    if (item === 'Bounty charm') {
                        gotExps += getLuckInt(0, 50 + index, luckNumber);
                        gotGolds += getLuckInt(0, 50 + index * 2, luckNumber);
                    }
                    break;
                case 'treatment':
                    teammate = getLuckData(heros, 0, 4, luckNumber);
                    if (hero === 'Witch doctor') {
                        action = 'milk';
                    }
                    break;
            }
            heroData.golds += gotGolds;
            heroData.exps += gotExps;
            var desc = hero + action + 'Up“' + (item || teammate || enemy) + '”';
            if (gotGolds) {
                desc += '，Got money ' + gotGolds;
            }
            if (gotExps) {
                desc += '，' + (gotGolds ? 'and' : '') + 'Gained experience ' + gotExps;
            }
            desc += '。';
            var dataItem = {
                id: time,
                time: time,
                hero: hero,
                action: action,
                teammate: teammate || '',
                enemy: enemy || '',
                item: item || '',
                gotgolds: gotGolds || '',
                gotexps: gotExps || '',
                exps: heroData.exps,
                golds: heroData.golds,
                kills: heroData.kills,
                desc: desc,
                date: nowTime + time*1000
            };
            return dataItem;
        };

        return {
            dataSource: {
                cols: cols,
                length: size,
                getByIndex: createDataItem
            },
            valueOperator: {
                gametime: {
                    getter: function(time) {
                        var hours = Math.floor(time/3600);
                        if (hours < 10) {
                            hours = '0' + hours;
                        }
                        var mins = Math.floor(time/60)%60;
                        if (mins < 10) {
                            mins = '0' + mins;
                        }
                        var secs = time%60;
                        if (secs < 10) {
                            secs = '0' + secs;
                        }
                        return hours + ':' + mins + ':' + secs;
                    }
                }
            },
            generate: function (size) {
                var result = [];
                for(var i = 0; i < size; ++i) {
                    result.push(createDataItem(i));
                }
                return result;
            }
        };
    };
    var sampleSize = 10000000000000;
    var sampleData = createDataSample(sampleSize);

    // var options1 = $.extend(sampleData, {
    //     borderWidth: 1,
    //     height: 500,
    //     defaultDateFormater: 'hh:mm:ss',
    //     states: {
    //         fixedTopUntil: 0,
    //         fixedBottomFrom: sampleSize,
    //         fixedRightFrom: 12,
    //         pager: {page: 0}
    //     },
    //     configs: {
    //         'C1': {
    //           style: {textAlign: 'right'}
    //         },
    //         'C2': {
    //           style: {fontWeight: 'bold'}
    //         }
    //     },
    //     renderDelay: 200,
    //     // checkable: true,
    //     sortable: false,
    //     // rowDefaultHeight: 50,
    // });
    // var staticDataSource = {
    //     cols: sampleData.dataSource.cols,
    //     data: sampleData.generate(10),
    //     cache: true,
    // };
    // var options2 = {
    //     configs: {
    //         'R0C0': {
    //           label: '#'
    //         },
    //         'C1': {
    //           style: {textAlign: 'right'}
    //         },
    //         'C2': {
    //           style: {fontWeight: 'bold'}
    //         },
    //     },
    //     dataSource: staticDataSource,
    //     valueOperator: sampleData.valueOperator,
    //     states: {
    //         pager: {page: 1, recPerPage: 12},
    //     },
    //     height: 300,
    //     renderDelay: 200,
    //     checkable: true,
    //     checkByClickRow: false,
    // };
    // var datagrid = $('#dataGrid2').datagrid(options2).data('zui.datagrid');
    // console.log('datagrid2', datagrid);
    // window.staticDataSource = staticDataSource;
    // window.datagrid = datagrid;

    var options3 = {
        height: 'page',
        states: {
            pager: {page: 1, recPerPage: 5},
            search: 'etst'
        },
        dataSource: {
            cols:[
                {name: 'time', label: 'time', width: 132},
                {name: 'hero', label: 'hero', width: 134},
                {name: 'action', label: 'action', width: 109},
                {name: 'target', label: 'aims', width: 109},
                {name: 'desc', label: 'description', width: 287}
            ],
            remote: function(params) {
                return {
                    // Original request address
                    url: '../../docs/partial/remote-data-' + params.page + '.json',
                    // Request type
                    type: 'GET',
                    // type of data
                    dataType: 'json'
                };
            }
        }
    };

    // var datagrid2 = $('#dataGrid2').datagrid(options2).data('zui.datagrid');
    // console.log('datagrid2', datagrid2);

    var datagrid3 = $('#remoteDataGridExample').datagrid({
        states: {
            pager: {page: 1, recPerPage: 5},
        },
        dataSource: {
            cols:[
                {name: 'time', label: 'time', width: 132},
                {name: 'hero', label: 'hero', width: 134},
                {name: 'action', label: 'action', width: 109},
                {name: 'target', label: 'aims', width: 109},
                {name: 'desc', label: 'description', width: 287}
            ],
            remote: function(params) {
                return {
                    // Original request address
                    url: '../partial/remote-data-' + params.page + '.json',
                    // Request type
                    type: 'GET',
                    // type of data
                    dataType: 'json'
                };
            },
            remoteConverter: function(data) {
                return data;
            }
        }
    }).data('zui.datagrid');
    console.log('datagrid3', datagrid3);
});
</script>
</body>
</html>
